<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匹配结果 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .result-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            margin: 0 auto;
        }
        .score-excellent { background: linear-gradient(135deg, #28a745, #20c997); }
        .score-good { background: linear-gradient(135deg, #ffc107, #fd7e14); }
        .score-fair { background: linear-gradient(135deg, #fd7e14, #dc3545); }
        .score-poor { background: linear-gradient(135deg, #dc3545, #6f42c1); }
        
        .score-bar {
            height: 20px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }
        .score-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 0.8s ease;
        }
        .score-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        .analysis-card {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 10px;
            margin-bottom: 1.5rem;
        }
        
        .skill-match {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            margin: 0.25rem;
            display: inline-block;
            font-size: 0.875rem;
        }
        .skill-perfect { background-color: #d4edda; color: #155724; }
        .skill-good { background-color: #fff3cd; color: #856404; }
        .skill-partial { background-color: #f8d7da; color: #721c24; }
        .skill-missing { background-color: #f1f3f4; color: #6c757d; }
        
        .improvement-item {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 0 8px 8px 0;
        }
        
        .timeline-item {
            border-left: 2px solid #dee2e6;
            padding-left: 1rem;
            margin-bottom: 1rem;
            position: relative;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 0.5rem;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #007bff;
        }
        
        .export-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-briefcase-fill me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reports">报告中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><a class="dropdown-item" href="/job-matching/manage">岗位管理</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 返回按钮 -->
        <div class="mb-3">
            <a th:href="@{/job-matching/job/{id}(id=${result.jobDescription.id})}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i>返回岗位详情
            </a>
            <a href="/job-matching" class="btn btn-outline-secondary">
                <i class="bi bi-list me-1"></i>岗位列表
            </a>
        </div>

        <!-- 结果头部 -->
        <div class="result-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 mb-2">匹配分析结果</h1>
                    <h4 class="mb-3" th:text="${result.jobDescription.title}">岗位标题</h4>
                    <p class="mb-0">
                        <i class="bi bi-building me-2"></i>
                        <span th:text="${result.jobDescription.companyName}">公司名称</span>
                        <span class="ms-4">
                            <i class="bi bi-calendar me-1"></i>
                            分析时间：<span th:text="${#temporals.format(result.createdAt, 'yyyy-MM-dd HH:mm')}">时间</span>
                        </span>
                    </p>
                </div>
                <div class="col-md-4 text-center">
                    <div class="score-circle" 
                         th:classappend="${result.overallScore >= 80 ? 'score-excellent' : (result.overallScore >= 60 ? 'score-good' : (result.overallScore >= 40 ? 'score-fair' : 'score-poor'))}">
                        <span th:text="${#numbers.formatDecimal(result.overallScore, 1, 1)} + '%'">85%</span>
                    </div>
                    <div class="mt-2">
                        <span class="badge" 
                              th:classappend="${result.matchLevel.name() == 'EXCELLENT' ? 'bg-success' : (result.matchLevel.name() == 'GOOD' ? 'bg-warning' : (result.matchLevel.name() == 'FAIR' ? 'bg-info' : 'bg-danger'))}"
                              th:text="${result.matchLevel.name() == 'EXCELLENT' ? '优秀匹配' : (result.matchLevel.name() == 'GOOD' ? '良好匹配' : (result.matchLevel.name() == 'FAIR' ? '一般匹配' : '较差匹配'))}">匹配等级</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 左侧：详细分析 -->
            <div class="col-lg-8">
                <!-- 各维度评分 -->
                <div class="analysis-card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-bar-chart me-2"></i>各维度评分
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">技能匹配度</label>
                                <div class="score-bar bg-light">
                                    <div class="score-fill" 
                                         th:style="'width: ' + ${result.skillScore} + '%; background: linear-gradient(90deg, #28a745, #20c997);'"></div>
                                    <div class="score-text" th:text="${#numbers.formatDecimal(result.skillScore, 1, 1)} + '%'">85%</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">经验匹配度</label>
                                <div class="score-bar bg-light">
                                    <div class="score-fill" 
                                         th:style="'width: ' + ${result.experienceScore} + '%; background: linear-gradient(90deg, #007bff, #6610f2);'"></div>
                                    <div class="score-text" th:text="${#numbers.formatDecimal(result.experienceScore, 1, 1)} + '%'">75%</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">教育背景匹配度</label>
                                <div class="score-bar bg-light">
                                    <div class="score-fill" 
                                         th:style="'width: ' + ${result.educationScore} + '%; background: linear-gradient(90deg, #ffc107, #fd7e14);'"></div>
                                    <div class="score-text" th:text="${#numbers.formatDecimal(result.educationScore, 1, 1)} + '%'">90%</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">综合适配度</label>
                                <div class="score-bar bg-light">
                                    <div class="score-fill" 
                                         th:style="'width: ' + ${result.overallScore} + '%; background: linear-gradient(90deg, #dc3545, #e83e8c);'"></div>
                                    <div class="score-text" th:text="${#numbers.formatDecimal(result.overallScore, 1, 1)} + '%'">83%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 技能匹配分析 -->
                <div class="analysis-card" th:if="${result.skillAnalysis}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-gear me-2"></i>技能匹配分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(result.skillAnalysis, '\n', '<br>')}">技能匹配分析内容...</div>
                    </div>
                </div>

                <!-- 经验匹配分析 -->
                <div class="analysis-card" th:if="${result.experienceAnalysis}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-clock-history me-2"></i>经验匹配分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(result.experienceAnalysis, '\n', '<br>')}">经验匹配分析内容...</div>
                    </div>
                </div>

                <!-- 教育背景分析 -->
                <div class="analysis-card" th:if="${result.educationAnalysis}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-mortarboard me-2"></i>教育背景分析
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(result.educationAnalysis, '\n', '<br>')}">教育背景分析内容...</div>
                    </div>
                </div>

                <!-- 改进建议 -->
                <div class="analysis-card" th:if="${result.improvementSuggestions}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-lightbulb me-2"></i>改进建议
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(result.improvementSuggestions, '\n', '<br>')}">改进建议内容...</div>
                    </div>
                </div>

                <!-- 详细分析报告 -->
                <div class="analysis-card" th:if="${result.detailedAnalysis}">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="bi bi-file-text me-2"></i>详细分析报告
                        </h5>
                    </div>
                    <div class="card-body">
                        <div th:utext="${#strings.replace(result.detailedAnalysis, '\n', '<br>')}">详细分析报告内容...</div>
                    </div>
                </div>
            </div>

            <!-- 右侧：操作和信息 -->
            <div class="col-lg-4">
                <!-- 快速操作 -->
                <div class="export-section mb-4">
                    <h5 class="mb-3">
                        <i class="bi bi-download me-2"></i>导出报告
                    </h5>
                    <div class="d-grid gap-2">
                        <a th:href="@{/job-matching/result/{id}/export/pdf(id=${result.id})}" 
                           class="btn btn-primary">
                            <i class="bi bi-file-pdf me-2"></i>导出PDF报告
                        </a>
                        <a th:href="@{/job-matching/result/{id}/export/word(id=${result.id})}" 
                           class="btn btn-outline-primary">
                            <i class="bi bi-file-word me-2"></i>导出Word报告
                        </a>
                        <button class="btn btn-outline-secondary" onclick="window.print()">
                            <i class="bi bi-printer me-2"></i>打印报告
                        </button>
                    </div>
                </div>

                <!-- 岗位信息摘要 -->
                <div class="card analysis-card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>岗位信息
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="timeline-item">
                            <strong>岗位标题</strong><br>
                            <span th:text="${result.jobDescription.title}">岗位标题</span>
                        </div>
                        <div class="timeline-item">
                            <strong>公司名称</strong><br>
                            <span th:text="${result.jobDescription.companyName}">公司名称</span>
                        </div>
                        <div class="timeline-item" th:if="${result.jobDescription.workLocation}">
                            <strong>工作地点</strong><br>
                            <span th:text="${result.jobDescription.workLocation}">工作地点</span>
                        </div>
                        <div class="timeline-item" th:if="${result.jobDescription.salaryRange}">
                            <strong>薪资范围</strong><br>
                            <span th:text="${result.jobDescription.salaryRange}">薪资范围</span>
                        </div>
                        <div class="timeline-item" th:if="${result.jobDescription.experienceLevel}">
                            <strong>经验要求</strong><br>
                            <span th:text="${result.jobDescription.experienceLevel}">经验要求</span>
                        </div>
                        <div class="timeline-item" th:if="${result.jobDescription.educationLevel}">
                            <strong>学历要求</strong><br>
                            <span th:text="${result.jobDescription.educationLevel}">学历要求</span>
                        </div>
                    </div>
                </div>

                <!-- 匹配历史 -->
                <div class="card analysis-card" th:if="${matchHistory}">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-clock-history me-2"></i>相关匹配记录
                        </h6>
                    </div>
                    <div class="card-body">
                        <div th:each="match : ${#lists.size(matchHistory) > 3 ? matchHistory.subList(0, 3) : matchHistory}" 
                             class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <div class="flex-grow-1">
                                <div class="fw-bold small" th:text="${match.jobDescription.title}">岗位标题</div>
                                <div class="text-muted small" th:text="${#temporals.format(match.createdAt, 'MM-dd HH:mm')}">时间</div>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold" 
                                     th:classappend="${'text-' + (match.overallScore >= 80 ? 'success' : (match.overallScore >= 60 ? 'warning' : 'danger'))}"
                                     th:text="${#numbers.formatDecimal(match.overallScore, 1, 1)} + '%'">分数</div>
                                <a th:href="@{/job-matching/result/{id}(id=${match.id})}" 
                                   class="btn btn-sm btn-outline-primary">查看</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推荐操作 -->
                <div class="card analysis-card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="bi bi-lightning me-2"></i>推荐操作
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="/job-matching" class="btn btn-outline-primary">
                                <i class="bi bi-search me-2"></i>查找更多岗位
                            </a>
                            <a href="/resume/analysis" class="btn btn-outline-secondary">
                                <i class="bi bi-file-earmark-text me-2"></i>优化简历
                            </a>
                            <a href="/interview" class="btn btn-outline-info">
                                <i class="bi bi-chat-dots me-2"></i>模拟面试
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script>
        // 动画效果
        document.addEventListener('DOMContentLoaded', function() {
            // 分数条动画
            const scoreFills = document.querySelectorAll('.score-fill');
            scoreFills.forEach(fill => {
                const width = fill.style.width;
                fill.style.width = '0%';
                setTimeout(() => {
                    fill.style.width = width;
                }, 500);
            });
        });
    </script>
</body>
</html>